<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <link rel="icon" href="/img/fav-icon.png" type="image/x-icon" />
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Personal website</title>

<!--111111111111111111111111111111111111111111111111111111111-->

        <!-- Icon css link <link href="css/font-awesome.min.css" rel="stylesheet">-->
        <link href="/css/font-awesome.min.css" rel="stylesheet">
        <!-- Bootstrap <link href="css/bootstrap.min.css" rel="stylesheet"> -->
        <link href="/css/bootstrap.min.css" rel="stylesheet">
        
        
        <!-- Rev slider css -->
        <link href="/vendors/revolution/css/settings.css" rel="stylesheet">
        <link href="/vendors/revolution/css/layers.css" rel="stylesheet">
        <link href="/vendors/revolution/css/navigation.css" rel="stylesheet">
        
        <!-- Extra plugin css -->
        <link href="/vendors/owl-carousel/owl.carousel.min.css" rel="stylesheet">
        <link href="/vendors/magnify-popup/magnific-popup.css" rel="stylesheet">
        
        <link href="/css/style.css" rel="stylesheet">
        <link href="/css/responsive.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        
        <!--================Header Menu Area =================-->
        <header class="main_menu_area">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#"><img src="/img/logo.png" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav">
                        <li class="nav-item"><a class="nav-link" href="/index">主页</a></li>
                        <li class="nav-item active"><a class="nav-link" href="/toAbout"> 关于我们 </a></li>

                        
                    </ul>
                </div>
            </nav>
        </header>
        <!--================End Header Menu Area =================-->
        
        <!--================Banner Area =================-->
        <section class="banner_area">
            <div class="container">
                <div class="banner_inner_text">
                    <h2>关于我们</h2>
                    <p>Get to know us</p>
                </div>
            </div>
        </section>
        <!--================End Banner Area =================-->
        
        <!--================Challange Area =================-->
        <section class="challange_area p_100">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="challange_text_inner">
                            <div class="l_title">
                                <img src="/img/icon/title-icon.png" alt="">
                                <h6>Discover the features</h6>
                                <h2>不再隐匿于人海, 直面互联网热潮的挑战！</h2>
                            </div>
                            <p>供大于求的市场天枰让每一个it从业者摇摇欲坠，经过寒冬，迎来热潮。我从没有否定过这个供给链条，
								乌云吹过，换来的是一片青天。或许明天第一个到来的就是困难和挑战，但是我必须穿上稀松平常的衣服，
								这很荣幸、很痛苦、很无聊又很有意思。这不是最大的困难，也不是最终的挑战，在人生的无数路径上被挑选，
								不知道有没有人说过，在生活的山谷中放浪形骸、开怀大笑而又求真务实，才是最完美的姿态。
							</p>
                            <div class="c_video">
                                <a class="popup-youtube" href="https://bilibili.com"><img src="/img/icon/video-icon.png" alt="">See how we product </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 challange_img">
                        <div class="challange_img_inner">
                            <img class="img-fluid" src="/img/popup-photo.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--================End Challange Area =================-->
        
        <!--================Testimonials Slider Area =================-->
        <section class="testimonials_area">
            <div class="container">
                <div class="testimonials_slider owl-carousel">
                    <div class="item">
                        <div class="testi_item">
                            <h3>“校园经历”</h3>
                            <p>系学生会部长，培训新部员科技创新意识，训练基础计算机语言编程能力，组织部门内部的竞赛。参加组织举办计算机科技文化节，独自操办Html网页设计大赛和程序设计大赛。在第二届计算机科技文化节的Html网页设计大赛中取得前十名的成绩，在第三届计算机科技文化节的程序设计大赛中获得第7名</p>
                            <div class="media">
                                <div class="d-flex">
<!--                                    <img class="rounded-circle" src="/img/testimonials/testi-1.jpg" alt="">-->
                                    <img class="rounded-circle" src="/img/user.jpg" alt="">
                                </div>
                                <div class="media-body">
                                    <h4>校园经历</h4>
                                    <h5>大学学习期间的经历概况</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testi_item">
                            <h3>“个人信息”</h3>
                            <p>
                                年龄：22岁<br/>
                                民族：汉<br/>
                                政治面貌：共青团员<br/>
                                学历：统招本科<br/>
                                专业：数据科学与大数据技术<br/>
                                爱好：看书、学习编程、锻炼<br/>
                            </p>
                            <div class="media">
                                <div class="d-flex">
                                    <img class="rounded-circle" src="/img/user.jpg" alt="">
                                </div>
                                <div class="media-body">
                                    <h4>个人信息</h4>
                                    <h5>个人信息简述</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testi_item">
                            <h3>“项目经历”</h3>
                            <p>电商管理系统，该项目是在学习期间以小组为团队完成的实践项目，团队3人，我主要负责项目计划、后端功能实现和测试分析。后台架构使用SpringBoot框架 + shiro安全框架 + logbcak日志框架 + thymeleaf模板引擎，并且使用postman进行API测试；前台使用VUE模板。数据库使用关系型数据库mysql,后台使用mybatis-plus+druid连接池完成。前后端的API文档使用Swagger进行配置。</p>
                            <div class="media">
                                <div class="d-flex">
                                    <img class="rounded-circle" src="/img/user.jpg" alt="">
                                </div>
                                <div class="media-body">
                                    <h4>项目经历</h4>
                                    <h5>第一次实践项目经历</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testi_item">
                            <h3>“技术集”</h3>
                            <p>擅长使用SpringBoot框架进行MVC架构，掌握SSM、MP、Apache-Shiro、thymeleaf模板引擎、swagger和Redis等技术。熟练掌握office办公。入门使用PhotoShop、Adobe Premiere Pro、Adobe Acrobat DC.</p>
                            <div class="media">
                                <div class="d-flex">
                                    <img class="rounded-circle" src="/img/user.jpg" alt="">
                                </div>
                                <div class="media-body">
                                    <h4>技术集</h4>
                                    <h5>本人技术集的概况</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--================End Testimonials Slider Area =================-->
        
        <!--================We Are Company Area =================-->
        <section class="we_company_area p_100">
            <div class="container">
                <div class="row company_inner">
                    <div class="col-lg-6">
                        <div class="left_company_text">
                            <div class="l_title">
                                <img src="/img/icon/title-icon.png" alt="">
                                <h6>不负未来</h6>
                                <h2>计划寻找 <span>心仪</span> 互联网公司</h2>
                            </div>
                            <p>宝剑锋从砥砺出，梅花香自苦寒来。个人再多的磨炼也不及集体的一番点拨醒悟，孤芳自赏只会身陷囫囵，拥抱团队才能眺望未来。下面是本人的技术集：Javase ssm springboot swagger shiro Druid MySQL thymeleaf   </p>
							<hr>
							<p>
							The sword is sharpened, and the fragrance of plum blossoms comes from the bitter cold. No amount of personal training can compare to a collective effort to awaken oneself. Being alone and appreciative only leads to being trapped, and embracing the team can lead to a vision of the future. Here is my technical collection: Javase SSM springboot swagger shiro Druid MySQL thymleaf
							</p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="company_skill">
                            <p>can i do ?  我能做什么或者说是我更熟练哪些技术？下方就是想要的答案！但是碍于篇幅有限，在此只能展示部分技术熟练度比例。</p>
							<br>
							<p>Here is my technical collection :	</p>
                            <div class="our_skill_inner">
                                
                                <div class="single_skill">
                                    <h3>SpringBoot</h3>
                                    <div class="progress" data-value="93">
                                        <div class="progress-bar"> 
                                            <div class="progress_parcent"><span class="counter"> 93 </span>%</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="single_skill">
                                    <h3>SpringMVC</h3>
                                    <div class="progress" data-value="86">
                                        <div class="progress-bar">
                                            <div class="progress_parcent"><span class="counter"> 87 </span>%</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="single_skill">
                                    <h3>MySQL</h3>
                                    <div class="progress" data-value="90">
                                        <div class="progress-bar">
                                            <div class="progress_parcent"><span class="counter"> 90 </span>%</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="single_skill">
                                    <h3>Mybatis/MP-plus</h3>
                                    <div class="progress" data-value="82">
                                        <div class="progress-bar">
                                            <div class="progress_parcent"><span class="counter"> 82 </span>%</div>
                                        </div>
                                    </div>
                                </div>
								<div class="single_skill">
                                    <h3>Other</h3>
                                    <div class="progress" data-value="77">
                                        <div class="progress-bar">
                                            <div class="progress_parcent"><span class="counter"> 77 </span>%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--================End We Are Company Area =================-->
        
        <!--================End We Are Company Area =================-->
        <section class="talk_area">
            <div class="container">
                <div class="talk_text">
                    <h4>想要深入交流?</h4>
                    <a href="www.bilibili.com">contact-syty18335486954@163.com</a>
                </div>
            </div>
        </section>
        <!--================End We Are Company Area =================-->
        
        <!--================Footer Area =================-->
        <footer class="footr_area">
            <div class="footer_widget_area">
                <div class="container">
                    <div class="row footer_widget_inner">
                        <div class="col-lg-4 col-sm-6">
                            <aside class="f_widget f_about_widget">
                                <img src="/img/footer-logo.png" alt="">
                                <p>当你很累很累很累的时候,你应该闭上眼睛深呼吸,告诉自己你应该坚持的住,不要这么轻易的否定自己,谁说你没有美好未来,关于明天的事后天才知道</p>
                            </aside>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <aside class="f_widget f_insta_widget">
                                <div class="f_title">
                                    <h3>精图分享</h3>
                                </div>
                                <ul>
                                    <li><a href="#"><img src="/img/instagram/ins-1.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="/img/instagram/ins-2.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="/img/instagram/ins-3.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="/img/instagram/ins-4.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="/img/instagram/ins-5.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="/img/instagram/ins-6.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="/img/instagram/ins-7.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="/img/instagram/ins-8.jpg" alt=""></a></li>
                                </ul>
                            </aside>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <aside class="f_widget f_subs_widget">
                                <div class="f_title">
                                    <h3>订阅频道</h3>
                                </div>
                                <div class="input-group">
                                    <input id="form1" type="text" class="form-control" placeholder="邮箱" aria-label="Your e-mail address here">
                                    <span class="input-group-btn">
                                        <button class="btn btn-secondary submit_btn" type="button" onclick="submitFun1()">订阅</button>
                                    </span>
                                </div>
                            </aside>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer_copyright">
                <div class="container">
                    <div class="float-sm-left">
                        <h5><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
						SYTY &copy;<script>document.write(new Date().getFullYear());</script> 欢迎联系我们 | 更加有效的沟通！ 
						<i class="fa fa-heart-o" aria-hidden="true"></i>
                            by
                            <a href="https://bilibili.com" target="_blank">
                                网页联系
                            </a>
                        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                        </h5>
                    </div>
                    <div class="float-sm-right">
                        <ul>
                            <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            <li><a href="#"><i class="fa fa-behance"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
        <!--================End Footer Area =================-->
        <script>
			function submitFun1() {
				var element = document.getElementById("form1").value;
				console.log(element)
				console.log(element.type)
				if (element.trim() === ""){
					alert("发送错误！" + "请注意信息是否正确")

				}else{
					alert("订阅成功！"+"感谢支持")
				}
				
			}
		</script>
        
        
        
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="/js/jquery-3.2.1.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="/js/popper.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <!-- Rev slider js-->
        <script src="/vendors/revolution/js/jquery.themepunch.tools.min.js"></script>
        <script src="/vendors/revolution/js/jquery.themepunch.revolution.min.js"></script>
        <script src="/vendors/revolution/js/extensions/revolution.extension.actions.min.js"></script>
        <script src="/vendors/revolution/js/extensions/revolution.extension.video.min.js"></script>
        <script src="/vendors/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
        <script src="/vendors/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
        <script src="/vendors/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
        <script src="/vendors/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
        <!-- Extra plugin css -->
        <script src="/vendors/counterup/jquery.waypoints.min.js"></script>
        <script src="/vendors/counterup/jquery.counterup.min.js"></script>
        <script src="/vendors/counterup/apear.js"></script>
        <script src="/vendors/counterup/countto.js"></script>
        <script src="/vendors/owl-carousel/owl.carousel.min.js"></script>
        <script src="/vendors/magnify-popup/jquery.magnific-popup.min.js"></script>
        <script src="/js/smoothscroll.js"></script>
        
        <script src="/js/theme.js"></script>
    </body>
</html>